<template>
  <div class="container">
    <el-tabs v-model="activeName2" type="border-card" style="margin-top:20px;" @tab-click="handleClick1">
            <el-tab-pane label="国标" name="1" >
                </el-tab-pane>
                <el-tab-pane label="省标" name="2" >
                </el-tab-pane>
                <el-tab-pane label="省标-北京" name="3" >
                </el-tab-pane>
                <el-tab-pane label="省标-上海" name="4" >
                </el-tab-pane>
                
    <el-tabs
      v-model="activeName"
      type="border-card"
      style="margin-top: 20px"
      @tab-click="handleClick"
    >
    
      <el-tab-pane label="提取饮片" name="提取饮片">
        <el-row>
          <el-col :span="7">
            <el-input
              style="border-radius: 0 5px 5px 0; width: 300px"
              placeholder="请输入关键词"
              v-model.trim="searchName1"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" @click="handleSearch1">搜索</el-button>
            </el-input>
          </el-col>
          <el-button style="float: right; margin-right: 10px" @click="download"
            >模板下载</el-button
          >
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="action"
            :on-change="uploadonchange"
            accept=".xlsx,.xls"
            :show-file-list="false"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small">导入模板</el-button>
          </el-upload>
          <el-button
            type="primary"
            @click="gogongyi"
            v-if="added"
            style="float: right; margin-right: 10px"
            >添加工艺</el-button
          >
        </el-row>

        <el-table
          :data="tableData"
          border
          ref="multipleTable"
          header-cell-class-name="table-header"
          style="margin-top: 20px"
        >
          <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
          <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                    <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
          <!-- <el-table-column prop="productName" sortable label="加工产品"></el-table-column> -->
          <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
          <el-table-column prop="standards" sortable label="执行标准">
            <template slot-scope="scope">
              <el-button type="text" @click="handlecheck(scope.$index, scope.row)">{{
                scope.row.standards
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="edit"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                v-if="del"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          :total="total"
          style="margin-top: 20px"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="配方颗粒(浸膏粉)" name="配方颗粒(浸膏粉)">
        <el-row>
          <el-col :span="7">
            <el-input
              style="width: 300px"
              placeholder="请输入关键词"
              v-model.trim="searchName3"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" @click="handleSearch3">搜索</el-button>
            </el-input>
          </el-col>
          <el-button style="float: right; margin-right: 10px" @click="download"
            >模板下载</el-button
          >
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="action"
            :on-change="uploadonchange"
            accept=".xlsx,.xls"
            :show-file-list="false"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small">导入模板</el-button>
          </el-upload>
          <el-button
            type="primary"
            @click="gogongyi"
            v-if="added"
            style="float: right; margin-right: 10px"
            >添加工艺</el-button
          >
        </el-row>
        <el-table
          :data="tableData3"
          border
          ref="multipleTable"
          header-cell-class-name="table-header"
          style="margin-top: 20px"
        >
          <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
          <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                    <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
          <!-- <el-table-column prop="productName" sortable label="加工产品"></el-table-column> -->
          <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
          <el-table-column prop="standards" sortable label="执行标准">
            <template slot-scope="scope">
              <el-button type="text" @click="handlecheck(scope.$index, scope.row)">{{
                scope.row.standards
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="edit"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                v-if="del"
                @click="handleDelete1(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page.sync="currentPage3"
          @current-change="handleCurrentChange3"
          :total="total3"
          style="margin-top: 20px"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="配方颗粒(颗粒)" name="配方颗粒(颗粒)">
        <el-row>
          <el-col :span="7">
            <el-input
              style="width: 300px"
              placeholder="请输入关键词"
              v-model.trim="searchName1"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" @click="handleSearch2">搜索</el-button>
            </el-input>
          </el-col>
          <el-button style="float: right; margin-right: 10px" @click="download"
            >模板下载</el-button
          >
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="action"
            :on-change="uploadonchange"
            accept=".xlsx,.xls"
            :show-file-list="false"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small">导入模板</el-button>
          </el-upload>
          <el-button
            type="primary"
            @click="gogongyi"
            v-if="added"
            style="float: right; margin-right: 10px"
            >添加工艺</el-button
          >
        </el-row>
        <el-table
          :data="tableData1"
          border
          ref="multipleTable"
          header-cell-class-name="table-header"
          style="margin-top: 20px"
        >
          <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
          <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                    <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
          <!-- <el-table-column prop="productName" sortable label="加工产品"></el-table-column> -->
          <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
          <el-table-column prop="standards" sortable label="执行标准">
            <template slot-scope="scope">
              <el-button type="text" @click="handlecheck(scope.$index, scope.row)">{{
                scope.row.standards
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="edit"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                v-if="del"
                @click="handleDelete1(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :page-size="pagesize"
          :current-page.sync="currentPage1"
          @current-change="handleCurrentChange1"
          :total="total1"
          style="margin-top: 20px"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    </el-tabs>
    <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
  </div>
</template>

<script>
import BigImg from "../../../common/BigImg.vue";
import axios from "axios";
import {process_list, process_delete } from "@/request/api";
import { technology_import } from "@/request/manageapi.js";
export default {
  props: ["activeName1"],
  components: { "big-img": BigImg },
  data() {
    return {
      activeName2:'1',
      imgSrc: "",
      showImg: false,
      total1: 0,
      total: 0,
      total3: 0,
      currentPage: 1,
      currentPage1: 1,
      currentPage3: 1,
      pagesize: 10,
      searchName1: "",
      searchName2: "",
      searchName3: "",
      activeName: "提取饮片",
      tableData: [],
      tableData1: [],
      tableData3: [],
      boxCode: "",
      boxCode1: "",
      action: "",
      added: true,
      edit: true,
      del: true,
    };
  },
  created() {
    var data = JSON.stringify(this.$store.state.gygx);
    var a = "新增";
    var b = "编辑";
    var d = "删除";
    // if(data.indexOf(a) != -1){
    //     this.added = true
    // }else{
    //     this.added = false
    // }
    // if(data.indexOf(b) != -1){
    //     this.edit = true
    // }else{
    //     this.edit = false
    // }
    // if(data.indexOf(d) != -1){
    //     this.del = true
    // }else{
    //     this.del = false
    // }
  },
  mounted() {
    this.init();
    this.init1();
    this.init2();
  },
  methods: {
    handleClick1(){
       this.init();
    this.init1();
    this.init2();
    },
    gogongyi() {
      this.$router.push({
        path: "/manageprocess/added",
        query: { name: this.activeName, sid: this.activeName1 },
      });
    },
    download() {
      //  window.location.href = "http://" + window.location.host + "/muban.xlsx";
    //   window.location.href = "http://" + window.location.host + "/工艺模版导入.xls";
    var data = { companyId: this.activeName1 };
    let url = ""
      if (process.env.NODE_ENV == "development") {
        url = "http://" + window.location.host + "/api/technology/export"
      } else {
        url = "http://" + window.location.host + "/technology/export"

      }
      axios.request({
          url,
          responseType: "blob",
          method: "post",
          data,
        })
        .then((res) => {
          //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
          //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
          //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
          const content = res.data;
          const blob = new Blob([content]); //构造一个blob对象来处理数据
          const fileName = `工艺工序.xlsx`;

          //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          //IE10以上支持blob但是依然不支持download
          if ("download" in document.createElement("a")) {
            //支持a标签download的浏览器
            const link = document.createElement("a"); //创建a标签
            link.download = fileName; //a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); //执行下载
            URL.revokeObjectURL(link.href); //释放url
            document.body.removeChild(link); //释放标签
          } else {
            //其他浏览器
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handlecheck(index, row) {
      // console.log()
      this.showImg = true; // 获取当前图片地址
      this.imgSrc = this.$store.state.imageUrls + row.standards;
    },
    viewImg() {
      this.showImg = false;
    },
    init() {
      process_list({
        standard:this.activeName2,
        page: this.currentPage,
        type: "提取饮片",
        query: this.searchName1,
        companyId: this.activeName1,
      }).then((res) => {
        this.total = res.total;
        this.tableData = res.rows;
         for (let i = 0; i < this.tableData.length; i++) {
                        if(this.tableData[i].standard == 1){
                            this.tableData[i].standard = "国标"
                        }else if(this.tableData[i].standard == 2){
                            this.tableData[i].standard = "省标"
                        }else if(this.tableData[i].standard == 3){
                            this.tableData[i].standard = "省标-北京"
                        }else if(this.tableData[i].standard == 4){
                            this.tableData[i].standard = "省标-上海"
                        }
                        
                    }
      });
    },
    init1() {
      process_list({
        page: this.currentPage1,
        standard:this.activeName2,
        type: "配方颗粒(颗粒)",
        query: this.searchName1,
        companyId: this.activeName1,
      }).then((res) => {
        this.total1 = res.total;
        this.tableData1 = res.rows;
         for (let i = 0; i < this.tableData1.length; i++) {
                        if(this.tableData1[i].standard == 1){
                            this.tableData1[i].standard = "国标"
                        }else if(this.tableData1[i].standard == 2){
                            this.tableData1[i].standard = "省标"
                        }else if(this.tableData1[i].standard == 3){
                            this.tableData1[i].standard = "省标-北京"
                        }else if(this.tableData1[i].standard == 4){
                            this.tableData1[i].standard = "省标-上海"
                        }
                        
                    }

      });
    },

    init2() {
      process_list({
        page: this.currentPage3,
        standard:this.activeName2,
        type: "配方颗粒(浸膏粉)",
        query: this.searchName3,
        companyId: this.activeName1,
      }).then((res) => {
        this.total3 = res.total;
        this.tableData3 = res.rows;
         for (let i = 0; i < this.tableData3.length; i++) {
                        if(this.tableData3[i].standard == 1){
                            this.tableData3[i].standard = "国标"
                        }else if(this.tableData3[i].standard == 2){
                            this.tableData3[i].standard = "省标"
                        }else if(this.tableData3[i].standard == 3){
                            this.tableData3[i].standard = "省标-北京"
                        }else if(this.tableData3[i].standard == 4){
                            this.tableData3[i].standard = "省标-上海"
                        }
                        
                    }
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
      this.init1();
    },
    handleCurrentChange3(val) {
      this.currentPage4 = val;
      this.init2();
    },
    handleClick() {
      // console.log(this.activeName);
    },
    // 调用接口
    getcase() {},
    handleEdit(index, row) {
      this.$router.push({
        path: "/manageprocess/added",
        query: {
          id: row.id,name: this.activeName, sid: this.activeName1
        },
      });
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        process_delete(row.id).then((res) => {
          // this.tableData.splice(row,1)

          this.$notify({
            title: "操作成功",
            message: "删除成功",
            type: "success",
          });
          this.init();
        });
      });
    },
    handleDelete1(index, row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        process_delete(row.id).then((res) => {
          // this.tableData.splice(row,1)
          this.init1();
          this.$notify({
            title: "操作成功",
            message: "删除成功",
            type: "success",
          });
        });
      });
    },
    uploadonchange(file) {
      let formData = new FormData();
      formData.append("file", file.raw);
      formData.append("companyId", this.activeName1);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      technology_import(formData).then((res) => {
        if (res.code == 200) {
          this.$notify({
            title: "操作成功",
            message: "导入成功",
            type: "success",
          });
          this.init();
        } else {
          this.$notify.error({
            title: "操作失败",
            message: "导入失败",
            type: "error",
          });
        }
      });
    },
    handleSearch1() {
      this.currentPage = 1;
      this.init();
    },
    handleSearch2() {
      this.currentPage1 = 1;
      this.init1();
    },
    handleSearch3() {
      this.currentPage3 = 1;
      this.init2();
    },
  },
  watch: {
    activeName1: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        this.currentPage1 = 1;
        this.currentPage = 1;
        this.currentPage3 = 1;
        // this.currentPage6 = 1
        // this.activeName = "中药材"
        this.activeName1 = newVal;
        this.init();
        this.init1()
        this.init2()
      },
      deep: true,
    },
  },
};
</script>

<style>
.upload-demo .el-upload--text {
  border: none;
  width: auto;
  height: auto;
  border-radius: 0;
  float: right;
  margin-right: 10px;
}
.scopClass .el-table {
  margin-top: 20px;
}
.scopClass .el-pagination {
  text-align: center;
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination {
  text-align: center;
}
.el-col {
  margin-bottom: 0;
}
</style>
